<template>
  <a-row :gutter="[8, 0]" class="bar">
    <!-- <a-col :span="3">
      <a-select
        class=""
        show-search
        :default-value="districtValue"
        placeholder="请选择"
        :filter-option="districtFilterOption"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleDistrictChange"
        style="width: 100%;"
      >
        <a-select-option
          v-for="provinceItem in provinceData"
          :key="provinceItem"
          :value="provinceItem"
        >
          {{ provinceItem }}
        </a-select-option>
      </a-select>
    </a-col> -->
    <a-col :span="3">
      <a-select
        class=""
        :default-value="timeType"
        placeholder="请选择"
        :filter-option="dateFilterOption"
        option-filter-prop="children"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleDateChange"
        style="width: 100%;"
      >
        <a-select-option
          v-for="dataItem in dateData"
          :key="dataItem"
          :value="dataItem"
        >
          {{ dataItem }}
        </a-select-option>
      </a-select>
    </a-col>
    <!-- <a-col :span="3" v-show="showTimePicker">
      <a-month-picker
        placeholder="选择月份"
        :defaultValue="getCurrentMonth"
        @change="onMonthChange"
        :locale="locale"
        style="width: 100%;"
      />
    </a-col> -->
    <a-col :span="3">
      <a-button type="primary" class="searchButton" @click="searchData"
        >搜索</a-button
      >
    </a-col>
  </a-row>
</template>

<script>
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

export default {
  name: "ServiceStatistics",
  components: {},
  props: {
    initData: Object
  },
  data() {
    let { districtValue, timeType, startTime, endTime } = this.initData;
    return {
      locale: locale,
      // provinceData: [
      //   "全部",
      //   "华中片区",
      //   "华北片区",
      //   "华东片区",
      //   "东北片区",
      //   "西北片区",
      //   "深圳分公司",
      //   "宁波分公司",
      //   "重庆分公司",
      //   "沈阳分公司",
      //   "云南分公司",
      //   "泉州分公司"
      // ],
      dateData: ["最近半年", "最近一年"],
      showTimePicker: false,
      districtValue,
      timeType,
      startTime,
      endTime
      // districtValue: "全国",
      // timeType: "今年",
      // startTime: `${this.$Moment()
      //   .startOf("year")
      //   .format("YYYY-MM-DD")} 00:00:00`,
      // endTime: `${this.$Moment().format("YYYY-MM-DD")} 23:59:59`
    };
  },
  methods: {
    // 选择区域;
    handleDistrictChange(value) {
      this.districtValue = value;
      console.log("districtValue", this.districtValue);
    },
    // 选择日期
    handleDateChange(value) {
      let moment = this.$Moment;
      switch (value) {
        case "最近半年":
          this.showTimePicker = false;
          this.startTime = `${moment()
            .month(moment().month() - 5)
            .startOf("month")
            .format("YYYY-MM-DD")} 00:00:00`;
          this.endTime = `${moment()
            .month(moment().month() - 0)
            .endOf("month")
            .format("YYYY-MM-DD")} 23:59:59`;
          break;
        case "最近一年":
          this.showTimePicker = false;
          this.startTime = `${moment()
            .month(moment().month() - 11)
            .startOf("month")
            .format("YYYY-MM-DD")} 00:00:00`;
          this.endTime = `${moment()
            .month(moment().month() - 0)
            .endOf("month")
            .format("YYYY-MM-DD")} 23:59:59`;
          break;
        default:
          break;
      }

      this.timeType = value;

      console.log(this.startTime, this.endTime);
    },
    districtFilterOption(inputValue, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(inputValue.toLowerCase()) >= 0
      );
    },
    dateFilterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    onMonthChange(date, dateString) {
      let newDate = dateString + "-01";
      this.startTime = `${this.$Moment(newDate)
        .startOf("month")
        .format("YYYY-MM-DD")} 00:00:00`;
      this.endTime = `${this.$Moment(newDate)
        .endOf("month")
        .format("YYYY-MM-DD")} 23:59:59`;
      console.log(this.startTime, this.endTime);
    },
    searchData() {
      this.$emit("emitSearchData", {
        // districtValue: this.districtValue,
        timeType: this.timeType,
        startTime: this.startTime,
        endTime: this.endTime
      });
    },
    handleBlur() {},
    handleFocus() {}
  },
  created() {},
  mounted() {
    console.log(this.initData);
  },
  computed: {
    getCurrentMonth: function() {
      // 时间组件需要 moment 格式数据
      let date = this.$Moment().format("YYYY-MM-DD");
      return this.$Moment(date, "YYYY-MM-DD");
    }
  }
};
</script>

<style scoped="scoped">
.bar {
  width: 100%;
  height: 84px;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding: 24px 0px 0px 16px;
}
</style>
